@mi-canvas: ~"@{mi-prefix}canvas";

.@{mi-canvas} {
	width: 100%;
	height: 100%;
	background: #f6f6f6;
	font-family: sans-serif,Microsoft JhengHei;

	&-container {
		width: 100%;
		height: 100%;
		background: #fafafa;
	}

	&-content {
		width: 100%;
		height: 100%;
		position: relative;
		left: 0;
		top: 0;
	}

	&-tools {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 70px;
		.flex(flex-start);
		flex-wrap: nowrap;
		opacity: 1;
		transition: all .1s ease-in-out;
		z-index: 19900417;

		&-items {
			background: #fff;
			box-shadow: 0 0 6px #c7c7c7;
			border-radius: 32px;
			height: 50px;
			padding: 0 16px;
			.flex(center, flex-start);
		}

		&-item {
			width: 50px;
			height: 50px;
			.flex();

			.iconfont {
				font-size: 20px;
				.flex();
				width: 32px;
				height: 32px;
				color: #5c5c5c;
				cursor: pointer;
			}
		}

		&-icon {
			width: 50px;
			height: 50px;
			.flex();

			&.active {
				.iconfont {
					background: #808080;
					color: @white;
					.border-radius();
				}
			}
		}

		&&-mobile {
			flex-direction: column;
			height: auto;
			left: 20px;
			width: 50px;
			top: calc(50% - 266px);
			bottom: unset;

			.@{mi-canvas} {
				&-tools {
					&-items {
						flex-direction: column;
						height: auto;
						padding: 16px 0;
					}
				}
			}
		}
	}

	&-stages,
	&-layers {
		.@{poptip-prefix-cls} {
			&-body {
				padding: 0;
			}
		}

		&-title {
			.flex();
			font-weight: 500;
			color: #5F5368;
			padding: 16px 0 8px 0;
			font-size: 14px;

			span {
				cursor: default;
			}

			.@{icon-prefix-cls} {
				cursor: pointer;
			}

			&-btns {
				position: absolute;
				right: 16px;
				top: 21px;
				cursor: pointer;
			}
		}

		&-wrapper {
			width: 176px;
			margin-top: 8px;
			overflow: hidden;
		}

		&-list {
			overflow-x: hidden;
			overflow-y: scroll;
			margin-right: -17px;
			border-top: 1px solid #EFEFEF;
			max-height: 520px;
			box-sizing: border-box;
			padding: 8px 0;

			&-item {
				width: 176px;
				position: relative;
				padding-top: 8px;
				padding-bottom: 8px;
				display: flex;

				&.active {
					background: #F1F3F4;
					background-clip: content-box;
					outline: none;
				}
			}

			&-btns {
				.flex();
				flex-direction: column;
				height: 100%;
				padding-left: 6px;
				padding-right: 6px;
				width: 48px;
				border-left: 2px solid transparent;
				box-sizing: border-box;

				i.@{icon-prefix-cls} {
					width: 36px;
					height: 36px;
					.flex();
					cursor: pointer;
				}
			}

			&-thumbnail-bg {
				.thumbnail-background();
				margin: 8px 24px 8px 0;
				overflow: hidden;
				width: 100px;
				position: relative;
				cursor: pointer;
			}

			&-thumbnail {
				width: 100px;
				height: 100%;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
			}

			&-item {
				&.active {
					.@{mi-canvas}-stages-list-btns,
					.@{mi-canvas}-layers-list-btns {
						border-left-color: @primary-color;
					}
				}
				&#mi-canvas-paint-bucket {
					height: 82px;
					.@{mi-canvas}-layer-list-thumbnail-bg {
						height: 50px;
						cursor: pointer;
						i.iconfont {
							width: 30px;
							height: 30px;
							box-shadow: none;
							position: absolute;
							left: 35px;
							top: 10px;
							color: @white;
							background-color: #20212480;
							border-radius: 50%;
							font-size: 20px;
							.flex();
						}
						.@{mi-canvas}-paint-bucket {
							height: 50px;
						}
					}
				}
			}
		}

		&-btns {
			.flex();
			font-size: 14px;
			padding: 0 16px 16px;
			cursor: pointer;
		}
	}

	&-footer {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 70px;
		.flex(flex-start, flex-end);
		flex-wrap: nowrap;
		opacity: 1;
		transition: all .1s ease-in-out;
		z-index: 19900417;

		.@{mi-canvas} {
			&-tools-icon {
				background: #fff;
				box-shadow: 0 0 6px #c7c7c7;
				border-radius: 4px;
				cursor: pointer;

				.iconfont {
					font-size: 20px;
				}
			}
		}

		> div {
			margin-right: 8px;
		}
	}
}
